﻿@namespace BootstrapBlazor.Components
@inherits IdComponentBase

<div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
    @if (Style == UploadStyle.Normal)
    {
        <div class="input-group">
            <input type="text" class="form-control" id="@Id" readonly placeholder="@PlaceHolder" value="@GetFileName()" />
            <div class="input-group-append">
                @if (ShowDeleteButton)
                {
                    <Button class="@RemoveButtonClassString" IsDisabled="@IsDeleteButtonDisabled" Icon="@DeleteButtonIcon" Text="@DeleteButtonText" OnClick="@(e => OnFileDelete(UploadFiles.FirstOrDefault()))" />
                }
                <Button class="@BrowserButtonClassString" IsDisabled="@IsDisabled" Icon="@BrowserButtonIcon" Text="@BrowserButtonText" OnClick="@OnFileBrowser" />
            </div>
        </div>
    }
    else if (Style == UploadStyle.ClickToUpload)
    {
        <Button class="@BrowserButtonClassString" IsDisabled="@IsUploadButtonDisabled" Icon="@BrowserButtonIcon" Text="@BrowserButtonText" />
        <div class="upload-body is-list">
            @foreach (var item in UploadFiles)
            {
                <div @key="item" class="@GetUploadItemClassString(item)">
                    <i class="@GetFileFormatClassString(item)"></i>
                    <div class="fn">
                        <span>@GetFileName(item)</span>
                        <span>(@GetFileSize(item.Size))</span>
                    </div>
                    @if (item.Code == 0)
                    {
                        <i class="fa fa-check-circle-o text-success"></i>
                        <i class="fa fa-trash-o text-danger" @onclick:stopPropagation @onclick="@(e => OnFileDelete(item))"></i>
                    }
                    else
                    {
                        <i class="fa fa-times-circle-o"></i>
                    }
                    @if (ShowProgress)
                    {
                        <Progress Color="Color.Success" Height="2" Value="@item.ProgressPercent" />
                    }
                </div>
            }
        </div>
    }
    else if (Style == UploadStyle.Avatar)
    {
        <div class="upload-body is-avatar">
            @foreach (var item in UploadFiles)
            {
                <div @key="item" class="@GetUploadItemClassString(item)" style="@PrevStyleString">
                    <Avatar Url="@item.PrevUrl" />
                    <div class="upload-item-actions">
                        <span class="upload-item-delete p-3" @onclick="@(e => OnFileDelete(item))">
                            <i class="fa fa-trash-o"></i>
                        </span>
                        @if (ShowProgress)
                        {
                            <span class="upload-item-spin">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                            </span>
                        }
                    </div>
                    @if (!IsCircle)
                    {
                        <span class="upload-item-label">
                            <i class="fa fa-check"></i>
                            <i class="fa fa-times"></i>
                        </span>
                    }
                </div>
            }
            @if (!IsSingle || (IsSingle && !UploadFiles.Any()))
            {
                <div class="@GetUploadItemClassString()" style="@PrevStyleString">
                    <div class="upload-item-actions btn-browser">
                        <span class="upload-item-plus">
                            <i class="fa fa-plus"></i>
                        </span>
                    </div>
                </div>
            }
        </div>
    }
    else if (Style == UploadStyle.Card)
    {
        <div class="upload-body is-card">
            @foreach (var item in UploadFiles)
            {
                <div @key="@item" class="@GetUploadItemClassString(item)">
                    <div class="upload-item-body">
                        @if (IsImage(item))
                        {
                            <img src="@item.PrevUrl" />
                        }
                        else
                        {
                            <i class="@GetFileFormatClassString(item)"></i>
                        }
                    </div>
                    <div class="upload-item-size"><span>@GetFileName(item)</span> (@GetFileSize(item.Size))</div>
                    <div class="upload-item-actions">
                        <button class="btn btn-sm btn-outline-secondary" disabled="@GetDiabledString(item)">
                            <i class="fa fa-search-plus"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" disabled="@GetDeleteButtonDiabledString(item)" @onclick="@(e => OnFileDelete(item))">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                    @if (ShowProgress)
                    {
                        <Progress Color="Color.Success" Height="4" Value="@item.ProgressPercent" />
                    }
                    <span class="upload-item-label">
                        <i class="fa fa-check"></i>
                        <i class="fa fa-times"></i>
                    </span>
                </div>
            }
            @if (!IsSingle || (IsSingle && !UploadFiles.Any()))
            {
                <div class="@GetUploadItemClassString()">
                    <div class="upload-item-actions btn-browser">
                        <span class="upload-item-plus">
                            <i class="fa fa-plus"></i>
                        </span>
                    </div>
                </div>
            }
        </div>
    }
    <InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
</div>
